<html>
<head>
	<script src="jquery-2.1.0.min.js"></script>
	<script type="text/javascript">
	
	function chatAjax()
	{
		var inputObject = new Object();
		
		inputObject.actionId = document.getElementById("actionId").value;
		inputObject.messageSender = document.getElementById("messageSender").value;
		inputObject.messageRecipient = document.getElementById("messageRecipient").value;
		inputObject.messageText = document.getElementById("messageText").value;
		
		var inputObjectString = JSON.stringify(inputObject);
		var encodedObjectString = "inputObject="  + encodeURIComponent(inputObjectString);
		
		document.getElementById("messageFormSend").innerHTML = "Decoded: " + inputObjectString + "<br/>Encoded: " + encodedObjectString ;
		
		var asyncAjax = $.ajax(
		{
			url:"chat.php",
			type:"POST",
			data: encodedObjectString,
			complete: function (data,textStatus) {ajaxCallback(data,textStatus);},
		});
	}
	
	function ajaxCallback(data,textStatus)
	{
		console.log(data.responseText);
		try
		{	
			var returnedObject = JSON.parse(data.responseText);
			document.getElementById("messageFormResponse").innerHTML = returnedObject.toSource();
		}
		catch(exception)
		{
			document.getElementById("messageFormResponse").innerHTML = "Error: " + exception + "<br/>Script Output: " + data.responseText;
		}
	}
	</script>
</head>

<body>
	<table>
		<tr>
			<td>
				Action ID:
			</td>
			<td>
				<input id="actionId" type="text"></input>
			</td>
		</tr>
		<tr>
			<td>
				Sender:
			</td>
			<td>
				<input id="messageSender" type="text"></input>
			</td>
		</tr>
		<tr>
			<td>
				Recipient:
			</td>
			<td>
				<input id="messageRecipient" type="text"></input>
			</td>
		</tr>
		<tr>
			<td>
				Text:
			</td>
			<td>
				<input id="messageText" type="text"></input>
			</td>
		</tr>
		<tr>
			<td>
				<input id="messageSubmit" type="button" onclick="chatAjax()" value="Submit"></input>
			</td>
			<td>
			</td>
		</tr>
	</table>
	<br/>
	<div id="messageFormSend">
	</div>
	<br/>
	<div id="messageFormResponse">
	</div>
</body>

</html>